<template>
    <div class="calendarview-main">
        <el-calendar v-model="value" />
    </div>
</template>

<script>
import {
    reactive,
    toRefs
} from "vue";

export default {
    name: "CalendarView",
    setup() {
        const state = reactive({
            value: new Date()
        });

        return {
            ...toRefs(state),
        };
    },
};
</script>

<style lang="scss" scoped>
.calendarview-main {
    background: #f6f6f7;
    height: 100%;
    width: 100%;
    -webkit-app-region: no-drag;

    .el-calendar {
        background: #f6f6f7;
        --el-calendar-header-border-bottom: 1px solid #dee0e2;
        --el-calendar-border: 1px solid #dee0e2;
        --el-calendar-selected-bg-color: #ecf5ff;
    }
}
</style>

